<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="ui/common/taglibs::head">
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
<body>
<div class="easyui-layout LayoutLeftRight" data-options="fit:true">
	<!-- west 区域: 左侧菜单 -->
	<div data-options="region:'west'" class="leftNav">
	    <!-- 手风琴div -->
	    <div id="menuAccordion" ></div>
	</div>
	
	<!-- center 区域 :（点击左右菜单后对应展示的列页面） -->
	<div data-options="region:'center'" class="centerContent">
	    <!-- tabs选项卡 -->
	    <div id="layout_center_tabs"  class="easyui-tabs listTabs" data-options="fit:true" ></div>
	</div>

</div>

<script type="text/javascript">

    $(function() {
    	var openTab = "";
        // 手风琴初始化
        $('#menuAccordion').accordion({
            fillSpace: true,
            fit: true,
            border: false,
            animate: true
        });

        //根据一级选项卡所选，将手风琴的数据源传过来
        var url ='';
        if( localStorage.getItem("json") ){
            url = localStorage.getItem("json");
        }

        //根据数据源url加载手风琴
        $.get(ctx+"/system/menu/"+url , function(data) {
            if(data) {
                //标识是否展示默认面板
                $.each(data, function(index, item) {
                    var selected = false;
                    // Accordion 折叠面板
                    if(item.state == "url"){
                    	 $('#menuAccordion').accordion('add', {
                             title:  "<a class='accordionLink' onClick=\"add_tab(this,'"+item.iconCls+"','"+item.text+"','"+ctx+item.url+"')\" href='javascript:void()'><span class='"+item.iconCls+"'></span>"+item.text+"</a>",
                             content: "<ul id='menu_tree_" + item.id + "'></ul>",
                             selected: selected,
                             collapsible:false
                         });
                    	 if(openTab == ""){
                    		 openTab = "openTab";
                    		 addTab("<span class='"+item.iconCls+"'></span>&nbsp;"+item.text,ctx+item.url);
                    	 } 
                    }else{
                    	$('#menuAccordion').accordion('add', {
                            title:  "<span class='"+item.iconCls+"'></span>"+item.text,
                            content: "<ul id='menu_tree_" + item.id + "'></ul>",
                            selected: selected
                        });
                    	if(openTab == ""){
                    		openTab = "openTab";
                    	    addTab("<span class='"+item.children[0].iconCls+"'></span>&nbsp;"+item.children[0].text,ctx+item.children[0].url);
                    	}
                        // 树形菜单
	                    $('#menu_tree_' + item.id).tree({
	                        animate:true,
	                        data: item.children,
	                        onLoadSuccess:function(node){
	                        	$('.tree-indent').parent().parent('li').addClass('leftNavS');
	                        },
	                        onClick: function(node) {
	                            $('#menu_tree_' + item.id).tree('collapse',node.target);
	                            //触发选中事件，修改展示默认面板的标识，让默认面板不展示
	                            if (node.url) {
	                                var rPath = ctx;
	                                addTab("<span class='"+node.iconCls+"'></span>&nbsp;"+node.text,rPath+node.url);
	                            }
	                        },
	                        onSelect: function(){
	                        	$('#menuAccordion .active').removeClass('active');
	                        }
	                    });
                    }
                });
            }
        }, 'json'); 
    });
    function add_tab(e1,iconCls,title, url){
    	addTab("<span class='"+iconCls+"'></span>&nbsp;"+title, url);
    	$(e1).closest('.panel').addClass('active').siblings().removeClass('active');
    	$('#menuAccordion .tree .tree-node-selected').removeClass('tree-node-selected');
    }
    /** 添加选项卡，title为选项卡名称，url为需要载入页面的地址  **/
    function addTab(title, url){
    	if(url.length>2){
	        //选中当前的选项卡，重新加载
	        if ($('#layout_center_tabs').tabs('exists', title)){
	            $('#layout_center_tabs').tabs('select', title);
	            var currTab =  $('#layout_center_tabs').tabs('getSelected'); //获得当前tab
	            var url = "";
	            if (currTab && currTab.find('iframe').length > 0) {
	                url =  currTab.find('iframe')[0].src;
	                currTab.find('iframe').attr("src",url);
	            }
	        } else {
	            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	            $('#layout_center_tabs').tabs('add',{
	                title:title,
	                content:content,
	                closable:true,
	            });
	            $('.tabs').addClass('tabsBg');
	
	            var ul = $(".tabs-wrap");
	
	            $(".tabOperation").remove();
	            //在添加的面板之上插入刷新及关闭按钮
	            ul.before("<div class='tabOperation'>"+
	                    "<p><a class='refreshPage' href='javascript:void()' onClick='refreshPage()'></a></p>"+
	                    "<p id='close'><a class='closeAll' href='javascript:void()' onClick='javascript:closeAll()'></a></p>"+
	                    "</div>");
	        }
    	}
    }
    function closeAll() {
        $(".tabs li").each(function(index, obj) {
            //获取所有可关闭的选项卡
            var tab = $(".tabs-closable", this).text();
            $(".easyui-tabs").tabs('close', tab);
            $('.tabs').removeClass('tabsBg');
        });
        $('.tabOperation').remove();
    }
    function refreshPage(){
        //刷新当前tab
        var currTab =  $('#layout_center_tabs').tabs('getSelected');
        var url = "";
        if (currTab && currTab.find('iframe').length > 0) {
            url =  currTab.find('iframe')[0].src;
            currTab.find('iframe').attr("src",url);
        }
    }
</script>
</body>
</html>

